iT邦幫忙

2023 iThome 鐵人賽

DAY 23
0
Mobile Development

初窺Flutter系列 第 23

Flutter動畫-隱藏和顯示

  • 分享至 

  • xImage
  •  

使用Opacity實現淡入淡出效果,通過isVisible變量,設值更改不透明度,控制widgets的可見性。

AnimatedOpacity(
      opacity: _isVisible ? 1.0 : 0.0, // 根據可見性設置不透明度。1.0為不透明,0.0為透明
      duration: Duration(milliseconds: 500), // 動畫持續時間
      child: Widget(), //寫入要實現動畫效果的widgets
),

完整範例:實現文字淡入淡出效果

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: TextAnimation(),
    );
  }
}

class TextAnimation extends StatefulWidget {
  @override
  TextAnimationState createState() => TextAnimationState();
}

class TextAnimationState extends State<TextAnimation> {
  bool _isVisible = true; // 聲明一個變數來控制文字的可見性

  // 切換文字的可見性
  void toggleVisibility() {
    setState(() {
      _isVisible = !_isVisible;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('淡入淡出動畫'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            AnimatedOpacity(
              opacity: _isVisible ? 1.0 : 0.0, // 根據可見性設置不透明度
              duration: Duration(milliseconds: 500), // 動畫持續時間
              child: Text(
                '你好', // 要顯示的文字
                style: TextStyle(fontSize: 24.0),
              ),
            ),
            SizedBox(height: 20.0),
            ElevatedButton(
              onPressed: toggleVisibility, // 當按鈕被按下時切換可見性
              child: Text(_isVisible ? '隱藏詞彙' : '顯示詞彙'), // 根據可見性顯示不同的按鈕文本
            ),
          ],
        ),
      ),
    );
  }
}

成果展現
https://imgur.com/a/vR6rccl


上一篇
Flutter動畫概述
下一篇
Flutter動畫-平移、旋轉和縮放動畫
系列文
初窺Flutter30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言